기능적 JavaScript — 클로저

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

JavaScript는 부분적으로 함수형 언어입니다.

JavaScript를 배우려면 JavaScript의 기능적인 부분을 배워야 합니다.

이 기사에서는 클로저를 사용하는 방법을 살펴보겠습니다.

폐쇄

클로저는 내부 함수입니다.

내부 함수는 함수 내의 함수입니다.

예를 들어 다음과 같습니다.

function outer() {
  function inner() {}
}

클로저는 3가지 범위에 액세스할 수 있습니다.

여기에는 자체 선언에 선언된 변수가 포함됩니다.

또한 전역 변수에 액세스할 수 있습니다.

그리고 그들은 외부 함수의 변수에 접근할 수 있습니다.

예를 들어 다음이 있는 경우:

function outer() {
  function inner() {
    let x = 1;
    console.log(x);
  }
  inner();
}

그러면 x 함수 안에 inner가 있고 콘솔 로그의 동일한 함수에서 액세스하기 때문에 콘솔 로그는 1을 기록합니다.
inner 함수는 outer 함수 외부에서 볼 수 없습니다.
inner 함수 내에서 전역 변수에 액세스할 수도 있습니다.

예를 들어 다음이 있는 경우:

let global = "foo";

function outer() {
  function inner() {
    let a = 5;
    console.log(global)
  }
  inner()
}

그런 다음 'foo'가 inner 변수에 액세스할 수 있으므로 global가 기록됩니다.
inner가 액세스할 수 있는 또 다른 범위는 outer 함수의 범위입니다.

예를 들어 다음과 같이 작성할 수 있습니다.

function outer() {
  let outer = "outer"

  function inner() {
    let a = 5;
    console.log(outer);
  }
  inner()
}

outer 변수가 있고 inner 함수에서 액세스합니다.

클로저는 컨텍스트를 기억합니다.

클로저는 컨텍스트를 기억합니다.

따라서 어디에서나 사용하는 경우 함수에 있는 변수는 원래 컨텍스트 내에 있는 모든 변수입니다.

예를 들어 다음이 있는 경우:

const fn = (arg) => {
  let outer = "outer"
  let innerFn = () => {
    console.log(outer)
    console.log(arg)
  }
  return innerFn;
}

그러면 outer 및 arg 변수 값은 호출 위치에 관계없이 동일합니다.
outer는 'outer'이고 arg는 우리가 전달한 것입니다.
innerFn와 함께 fn를 반환하므로 fn를 호출하고 반환된 함수를 변수에 할당하고 호출할 수 있습니다.

const foo = fn('foo');
foo()

'foo'를 arg의 값으로 전달합니다.

따라서 우리는 다음을 얻습니다.

outer
foo

콘솔 로그에서.
fn 함수 밖에서 호출해도 값이 같다는 것을 알 수 있습니다.

실제 사례

디버깅을 위해 값을 기록할 수 있도록 자체tap 함수를 만들 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

const tap = (value) =>
  (fn) => {
    typeof(fn) === 'function' && fn(value);
    console.log(value);
  }

tap("foo")((it) => console.log('value:', it))

tap 함수를 만들고 호출합니다.
value를 취한 다음 함수fn를 취하여 콘솔 로그와 함께 실행하는 함수를 반환하는 함수가 있습니다.

이런 식으로 값과 함수를 전달할 수 있습니다.

그런 다음 우리는 다음을 얻습니다.

value: foo
foo

기록.

첫 번째는 우리가 전달한 콜백에서 온 것입니다.

그리고 두 번째는 tap 로 반환된 함수에서 가져온 것입니다.

결론

클로저는 내부 함수입니다.

그들은 외부 함수의 범위, 전역 변수 및 자체 범위에 액세스할 수 있습니다.

우리는 그것을 사용하거나 다양한 응용 프로그램을 사용할 수 있습니다.